<template>
  <el-card>
    <el-row :gutter="20" v-for="(attr, attrIndex) of attrArray" :key="attrIndex" class="attrRow">
      <el-col :span="4">
        <el-tag>{{ attr.attrName }}</el-tag>
      </el-col>
      <el-col :span="20">
        <el-row :gutter="20" v-for="(style, styleIndex) of attr.attrValue" :key="styleIndex" class="attrRow">
          <el-col :span="20">
            <el-form label-width="80px">
              <el-form-item label="样式名">
                <el-select v-model="style.styleName" filterable placeholder="请选择">
                  <el-option v-for="item in styleOptions" 
                  :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="样式值">
                <el-color-picker v-if="isColorStyle(style.styleName)" v-model="style.styleValue" show-alpha></el-color-picker>
                <el-input v-else v-model="style.styleValue"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="3">
            <el-form>
              <el-form-item>
                <el-button icon="el-icon-plus" type="primary" circle @click="handleAddStyle(attrIndex)"></el-button>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-minus" type="danger" circle @click="handleDeleteStyle(attrIndex, styleIndex)"></el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
var _ = require('lodash')
import ConfigUtil from '@/utils/graph-utils/configUtil'

export default {
  name: 'AttrsPanel',
  data() {
    return {
      attrArray: []
    }
  },
  computed: {
    styleOptions() {
      return ConfigUtil.getNodeAttrConfig()
    }
  },
  methods: {
    isColorStyle(styleName) {
      return styleName === 'fill' || styleName === 'stroke'
    },

    handleAddStyle(attrIndex) {
      this.attrArray[attrIndex].attrValue.push({
        styleName: '',
        styleValue: ''
      })
    },

    handleDeleteStyle(attrIndex, styleIndex) {
      this.attrArray[attrIndex].attrValue.splice(styleIndex, 1)
    },

    setAttrsInfo(attrs) {
      const self = this
      self.attrArray = []
      _.forIn(attrs, function(value, key) {
        const attr = {
          attrName: key,
          attrValue: []
        }

        _.forIn(value, function(styleValue, styleKey) {
          attr.attrValue.push({
            styleName: styleKey,
            styleValue: styleValue
          })
        })
        if (attr.attrValue.length === 0) {
          attr.attrValue.push({
            styleName: '',
            styleValue: ''
          })
        }
        self.attrArray.push(attr)
      })
    },

    getAttrsInfo() {
      const self = this
      const attrs = {}
      for (const attr of self.attrArray) {
        const value = {}
        for (const attrValue of attr.attrValue) {
          _.set(value, attrValue.styleName, attrValue.styleValue)
        }
        _.set(attrs, attr.attrName, value)
      }
      return attrs
    }
  }
}
</script>

<style scoped>
.attrRow {
  border: 1px solid #b7b7b7; 
  padding: 5px;
  margin-bottom: 2px;
}
</style>